<template>
  <div class="dtl_body">
    <!-- 图片详细内容区域 -->
    <div class="header_content">
      <h4 class="img_headline">{{imgDetail.title}}</h4>
      <!-- 日期及点击数 -->
      <p class="date_click">
        <span class="left">发表时间:{{$moment(imgDetail.add_time).format('YYYY-MM-DD')}}</span>
        <span class="right">点击:{{imgDetail.click}}</span>
      </p>
    </div>
    <hr class="hr_t" />

    <!-- 缩略图数组 -->
    <div class="img_arr">
      <ul>
        <li v-for="(item, index) in imgArr" :key="index">
          <van-image width="100" height="100" fit="cover" :src="item.src" @click="imgClick(index)" />
        </li>
      </ul>
    </div>

    <!-- 介绍 -->
    <div class="img_content">{{imgDetail.content}}</div>

    <!-- 评论功能 -->
    <Comment :imgId="imgId" :page="pages" @addPage="faAddPage"></Comment>
  </div>
</template>

<script>
import { getImgsDetail, getImgsArr } from "../../api/index";
import { ImagePreview } from "vant";
import Comment from "../common/Comment";
export default {
  data() {
    return {
      imgId: 0,
      // 图片详细数据
      imgDetail: {},

      // 缩略图数组
      imgArr: [],

      // 评论页数
      pages: 1
    };
  },
  methods: {
    // 根据图片id获取图片详情
    async getImgDetail(id) {
      const { data: res } = await getImgsDetail(id);
      if (res.status !== 0) return Toast.fail("获取数据失败");
      this.imgDetail = res.message[0];
    },

    // 根据图片ID获取缩略图数组
    async getImgsArrey(id) {
      const { data: res } = await getImgsArr(id);
      this.imgArr = res.message;
    },

    //图片预览功能
    imgClick(index) {
      let newArr = [];
      for (let i = 0; i < this.imgArr.length; i++) {
        newArr.push(this.imgArr[i].src);
      }
      ImagePreview({
        images: newArr,
        startPosition: index,
        className: "img_preview"
      });
    },
    faAddPage() {
      this.pages  =  this.pages + 1
    }
  },
  created() {
    // 接收传过来的imgsid
    this.imgId = this.$route.query.imgsid;
    this.getImgDetail(this.imgId);
    this.getImgsArrey(this.imgId);
  },
  components: {
    Comment
  }
};
</script>

<style lang="less" scope>
.dtl_body {
  margin: 20px 10px 50px;
}

.img_headline {
  height: 20px;
  margin-bottom: 20px;
  color: #26a2ff;
  font-size: 15px;
}

.date_click {
  font-size: 13px;
  color: #8f8f94;
}

.left {
  float: left;
}

.right {
  float: right;
}

.hr_t {
  margin-top: 55px;
}

.img_arr {
  overflow: hidden;
  ul {
    list-style: none;
    margin: 10px 0;
    li {
      float: left;
      box-sizing: border-box;
      padding: 5px;
      width: 33.3333%;
      img {
        box-shadow: 1px 0 8px 1px rgba(0, 0, 0, 0.3);
        width: 100%;
      }
    }
  }
}

.img_content {
  text-align: left;
  margin-top: 10px;
}

.img_preview img {
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 300px;
  height: 300px;
}
</style>